<template>
	<view class="container">
		<u-toast ref="callExceptionToast"></u-toast>
		<u-button class="select-call-type-button" @click="selectCallType">选择通话类型</u-button>
		<u-select v-model="selectorShow" :list="optionalItems" @confirm="handleSelect"></u-select>
		<view class="switch">
			<text class="text">{{ callTypeText }}:</text>
			<u-switch v-model="started" @change="switchStateChange"></u-switch>
		</view>
		<view class="call-state" v-if="started">
			<text class="text">正在{{ callTypeText }}..</text>
			<u-icon name="volume-up" size="60"></u-icon>
		</view>
		<view v-show="started && webviewShowed"><web-view class="remote-call-page-view" v-if="started" :src="callURI"></web-view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			started: false,
			selectorShow: false,
			webviewShowed: false,
			callTypeText: '语音通话',
			optionalItems: [
				{
					value: '语音通话',
					label: '语音通话'
				},
				{
					value: '视频通话',
					label: '视频通话'
				}
			]
		};
	},
	computed: {
		// 检测并给予对应的URI
		callURI() {
			let result;
			this.callTypeText === '语音通话' && (result = 'https://api.ecuder.cn:16386/audio.html');
			this.callTypeText === '视频通话' && (result = 'https://api.ecuder.cn:16386/');
			return result;
		}
	},
	methods: {
		selectCallType() {
			if(this.started) {
				this.$refs.callExceptionToast.show({
					title: "请先关闭当前通话再切换类型",
					position: "top",
					type:"error"
				});
			}else {
				this.selectorShow = true;
			}
		},
		handleSelect([optionalItem]) {
			this.callTypeText = optionalItem.value;
		},
		switchStateChange(isStarted) {
			//#ifdef APP-PLUS
			if (isStarted) {
				// var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
				// uni.getSystemInfo({
				// 	//成功获取的回调函数，返回值为系统信息
				// 	success: sysinfo => {
				// 		height = sysinfo.windowHeight; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
				// 	},
				// 	complete: () => {}
				// });
				var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
				setTimeout(()=> {
					var wv = currentWebview.children()[0];
					wv.setStyle({
						//设置web-view距离顶部的距离以及自己的高度，单位为px
						top: 300, //此处是距离顶部的高度，应该是你页面的头部
						height: 300, //webview的高度

						scalable: true //webview的页面是否可以缩放，双指放大缩小
					});
					this.webviewShowed = true;
				}, 1000); //如页面初始化调用需要写延迟
			}
			//#endif
		}
	},
	onLoad() {
		console.log('page loaded');
	}
};
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40rpx;
}

.switch,
.call-state {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 20rpx;
}
.text {
	font-size: 40rpx;
	margin-right: 20rpx;
}

.remote-call-page-view {
	width: 100%;
	height: 500rpx;
}
</style>
